<!-- 挂号记录  -->
<template>
	<view class="container">
	<!-- 	<view style="padding: 28rpx 36rpx;background-color: #fff;" class="search">
			<up-search placeholder="请输入搜索内容" :showAction="false" v-model="search"></up-search>
		</view> -->
		<view class="row-start">
			<!-- 左侧分类 -->
			<scroll-view scroll-y class="" :style="{height:`calc(100vh - ${searchHeight}px)`}" v-if="list.length != 0">
				<view class="item-content" v-for="(item, index) in list" :key="index" :class="tabIndex == index && 'active'">
					
					<view class="item-content-top">
						<image src="/static/icon/icon_id.png" mode=""></image>
						<text class="name">{{item.reportName}}</text>
						<text class="sex">{{item.sex}}</text>
						<text class="age">{{item.age}}岁</text>
					</view>
					
					<view class="content-info">
						<view class="title">
							就诊号:
						</view>
						<view class="info">
							{{item.reportId}}
						</view>
					</view>
					
					<view class="content-info">
						<view class="title">
							手机号:
						</view>
						<view class="info">
							{{item.phone}}
						</view>
					</view>
					
					<view class="content-info">
						<view class="title">
							挂号类型:
						</view>
						<view class="info">
							{{item.type}}
						</view>
					</view>
				
					<view class="content-info">
						<view class="title">
							所属科室:
						</view>
						<view class="info">
							{{item.department}}
						</view>
					</view>
					
					<view class="content-info">
						<view class="title">
							就诊医生:
						</view>
						<view class="info">
							{{item.doctorName}}
						</view>
					</view>
				
					<view class="content-info">
						<view class="title">
							病况:
						</view>
						<view class="info">
							{{item.zhuan}}
						</view>
					</view>
				</view>
			</scroll-view>	
			
			<empty v-else></empty>
		</view>
	</view>
</template>

<script setup>
	import {onLoad} from "@dcloudio/uni-app";
	import {ref, getCurrentInstance} from "vue";
	import {
		registerList
	} from "@/api/index.js"
	
	const list = ref([])
	
	const searchHeight = ref(0)
	const instance = getCurrentInstance()
	
	onLoad(() => {
		
		registerList({page:1,limit:999,userId: uni.getStorageSync('userInfo')?.id}).then(res => {
			console.log("res", res)
			list.value = res.data;
		})
		// const query = uni.createSelectorQuery().in(instance.proxy);
		// query
		//   .select(".search")
		//   .boundingClientRect((data) => {
		// 	  console.log("Data", data)
		// 	searchHeight.value = data.height;
		// 	registerList({page:1,limit:999}).then(res => {
		// 		console.log("res", res)
		// 		list.value = res.entity;
		// 	})
		//   })
		//   .exec();
	})
	
	
</script>

<style lang="scss">
	page {
		background-color: #F5F6FA !important;
	}
	.row-start {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.container {
			
		.item-content {
			background-color: #FFF;
			padding: 20rpx 40rpx;
			margin-top: 18rpx;
			
			&:first-child{
				margin-top: 0;
			}
			
			.item-content-top {
				display: flex;
				align-items: center;
				image {
					width: 50rpx;
					height: 46rpx;
				}
				.name {
					font-size: 30rpx;
					margin-left: 18rpx;
				}
				.sex {
					font-size: 30rpx;
					margin-left: 18rpx;
					color: #999;
				}
				.age {
					font-size: 30rpx;
					margin-left: 18rpx;
					color: #999;
				}
			}
		
			.content-info {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-top: 10rpx;
				.title {
					font-size: 30rpx;
					color: #999;
					min-width: 150rpx;
					text-align: right;
					margin-right: 20rpx;
				}
				.info {
					font-size: 30rpx;
					color: #999;
				}
			}
		}
	}
</style>